<script>
  import { Spinner } from 'vux'
  import Vue from 'vue'

  export default {
    props: {
      value: null,
      self: {
        type: Object
      },
      exp: {
        type: String,
        default: '_'
      },
      filter: {
        type: [Function, String]
      }
    },
    render (h) {
      if (isEmpty(this.text)) {
        return h('Spinner', {props: {type: 'dots'}})
      }
      return h('span', [this._filter(this.text), this.$slots.default && this.$slots.default[0]])
    },
    data () {
      return {}
    },
    computed: {
      text () {
        const {value, self, exp} = this
        if (self !== undefined) {
          return eval('self.' + exp)
        }
        return value
      }
    },
    methods: {
      _filter (v) {
        const filter = this.filter
        if (isEmpty(filter)) return v
        const type = typeof(filter)
        if (type == 'string') {
          let p = filter.match(/\((.*)\)/)
          p = p == null ? [v]: [v, p]
          return Vue.filter(filter).apply(null, p)
        } else if (type == 'function') {
          return filter(v)
        }
      }
    },
    components: {Spinner}
  }
</script>
<style type="text/scss" lang="scss" scoped>

</style>
